import React from 'react';
import { Star } from 'lucide-react';
export function EditorsPicks() {
  return <section className="py-16 px-4 md:px-8 lg:px-12 bg-[#f3f0eb]">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center mb-10">
          <div>
            <h4 className="text-xs uppercase tracking-wider text-[#4a6b60] font-medium mb-2">
              Monthly Feature
            </h4>
            <h2 className="font-serif text-2xl md:text-3xl text-[#4a4a4a]">
              Editor's Ritual Box
            </h2>
          </div>
        </div>
        <div className="bg-white rounded-lg overflow-hidden shadow-sm">
          <div className="grid grid-cols-1 md:grid-cols-2">
            <div className="h-64 md:h-auto bg-cover bg-center" style={{
            backgroundImage: 'url(https://images.unsplash.com/photo-1507652313519-d4e9174996dd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80)'
          }}></div>
            <div className="p-8 md:p-10 flex flex-col justify-center">
              <div className="flex items-center mb-4">
                <Star className="h-4 w-4 fill-current text-[#d7a27c]" />
                <Star className="h-4 w-4 fill-current text-[#d7a27c]" />
                <Star className="h-4 w-4 fill-current text-[#d7a27c]" />
                <Star className="h-4 w-4 fill-current text-[#d7a27c]" />
                <Star className="h-4 w-4 fill-current text-[#d7a27c]" />
              </div>
              <h3 className="font-serif text-2xl mb-3 text-[#4a4a4a]">
                Winter Hydration Ritual
              </h3>
              <p className="text-sm leading-relaxed mb-6">
                A curated collection of deeply hydrating formulas to nourish
                your skin through the cold months. Featuring a luxurious facial
                oil, overnight mask, and herbal tea blend for inner warmth.
              </p>
              <div className="mb-6">
                <span className="text-lg font-medium">$89.00</span>
                <span className="text-sm line-through ml-2 text-gray-500">
                  $120.00
                </span>
              </div>
              <button className="bg-[#4a6b60] hover:bg-[#3d5a50] text-white px-6 py-3 rounded-md transition-colors self-start">
                Shop the Collection
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>;
}